import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  state = {
    todos: [
      { id: "1", name: "吃饭", done: true },
      { id: "2", name: "睡觉", done: false },
      { id: "3", name: "搬砖", done: false },
    ],
  };

  getValue = (obj) => {
    this.setState({
      todos: [obj, ...this.state.todos],
    });
  };

  updateTodos = (id, done) => {
    let { todos } = this.state;
    let findind = todos.findIndex((n) => {
      return n.id === id;
    });
    todos[findind].done = done;
    this.setState({
      todos: todos,
    });
  };

  updateDel = (id) => {
    let { todos } = this.state;
    let findind = todos.findIndex((n) => {
      return n.id === id;
    });
    todos.splice(findind, 1);
    this.setState({
      todos: todos,
    });
  };

  checkAll = (isAll) => {
    let { todos } = this.state;
    let newTodos = todos.map((item) => {
      return { ...item, done: isAll };
    });
    this.setState({
      todos: newTodos,
    });
  };

  clearAll = () => {
    let { todos } = this.state;
    let newTodos = todos.filter((item) => {
      return !item.done;
    });
    this.setState({
      todos: newTodos,
    });
  };

  render() {
    return (
      <div className="App">
        <Header getValue={this.getValue}></Header>
        <List
          todos={this.state.todos}
          updateTodos={this.updateTodos}
          updateDel={this.updateDel}
        ></List>
        <Footer
          todos={this.state.todos}
          checkAll={this.checkAll}
          clearAll={this.clearAll}
        ></Footer>
      </div>
    );
  }
}
